<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="auto" size="small">
      <el-form-item label="点赞用户" prop="userId">
        <el-select
            v-model="queryParams.userId"
            clearable
            filterable
            placeholder="请选择用户"
            style="width: 240px"
        >
          <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="`${user.nickName} - ${user.userName}`"
              :value="user.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="点赞目标类型" prop="targetType">
        <el-select
            v-model="queryParams.targetType"
            clearable
            placeholder="请选择点赞目标类型"
            style="width: 240px"
        >
          <el-option
              v-for="(value, key) in {
        'industry': '行业动态',
        'course': '课程'
      }"
              :key="key"
              :label="value"
              :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" size="small" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="recordList" style="width: 100%">
      <el-table-column align="center" label="主键ID" prop="id"/>
      <el-table-column align="center" label="点赞目标名称" prop="targetName"/>
      <el-table-column align="center" label="点赞目标类型" prop="targetType">
        <template #default="scope">
          {{ formatTargetType(scope.row.targetType) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="封面" prop="coverImage" width="100">
        <template #default="scope">
          <image-preview :height="50" :src="scope.row.coverImage" :width="50"/>
        </template>
      </el-table-column>
      <el-table-column label="内容" prop="summary" show-overflow-tooltip/>
      <el-table-column align="center" label="点赞用户" prop="userName"/>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {listRecord} from "@/api/business/record.js"
import dayjs from 'dayjs'
import {listUserInfo} from "@/api/system/user.js"

const userList = ref([])

// 加载状态
const loading = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 数据列表
const recordList = ref([])
// 查询表单引用
const queryForm = ref(null)
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  userId: null,
  userName: null,
  targetType: null,
  targetId: null,
  targetName: null,
})

// 格式化目标类型
const formatTargetType = (type) => {
  const typeMap = {
    'industry': '行业动态',
    'course': '课程'
  }
  return typeMap[type] || type
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

/** 获取数据列表 */
const getList = () => {
  loading.value = true
  listRecord(queryParams.value).then(response => {
    recordList.value = response.rows
    total.value = response.total
  }).finally(() => {
    loading.value = false
  })
}

/** 搜索 */
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置查询 */
const resetQuery = () => {
  queryForm.value.resetFields()
  handleQuery()
}

// 加载用户列表
const loadUserList = async () => {
  try {
    const {rows} = await listUserInfo();
    userList.value = rows || [];
  } catch (error) {
    console.error('加载用户列表失败:', error);
    userList.value = [];
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadUserList();
  getList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
